<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <meta name="author" content="Adam Freeman" />
    <meta name="description" content="A simple example" />
    <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico">
</head>

<body>
    <!-- select/optgroup/textarea/output/keygen -->

    <form onsubmit="return false" 
    oninput="res.value = quant.valueAsNumber * price.valueAsNumber">
        <p>
            <label for="fave" style="vertical-align: top">
                Favorite Fruit:
                <!-- multiple ctrl+左键 可多选 -->
                <select name="fave" id="fave" size="5" multiple>
                    <!-- 对otptions编组 -->
                    <optgroup label="Top Choices">
                        <option value="apples" selected label="Apples">Apples</option>
                        <option value="oranges" label="Oranges">Oranges</option>
                    </optgroup>

                    <optgroup label="Others">
                        <option value="cherries" label="Cherries">Cherries</option>
                        <option value="pears" label="Pears">Pears</option>
                    </optgroup>
                </select>
            </label>
        </p>
        <p>
            <textarea name="story" id="story" ols="20" rows="5">Tell us why this is your favorite fruit</textarea>
        </p>
        <fieldset>
            <legend>Price Caculator</legend>
            <input type="number" placeholder="Quantity" id="quant" name="quant" /> x
            <input type="number" placeholder="Quantity" id="price" name="price" /> = 
            <output for="quant name" name="res"></output>
        </fieldset>
        <!-- 输入验证 
            required 确保输入了一个值，否则无法提交表单 
            min max 确保输入值的范围
            pattern 确保输入值与指定模式匹配 pattern中正则匹配表达式
            email和url 需要结合pattern的匹配
            formnovalidate 禁用输入验证
            
        -->
        <input type="submit" value="Submit">
    </form>





</body>

</html>